<div class="row">
	<div class="col-xs-12">
		<div class="box" id="role-app">
			<div class="box-header">
				<h3 class="box-title">角色管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId" v-model="searchRoleName"
							class="form-control pull-right" placeholder="角色名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search" @click="loadRoleList()">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add" @click="addRole()">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
				  <table class="table table-hover">
					<thead>
						<tr>
						    <th>序号</th>
							<th>角色名称</th>
							<th>备注</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>创建用户</th>
							<th>修改用户</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
						<tr v-for="(role,index) in roleList">
							<td>{{index+1}}</td>
							<td>{{role.name}}</td>
							<td>{{role.note}}</td>
							<td>{{role.createdTimeStr}}</td>
							<td>{{role.modifyTimeStr}}</td>
							<td>{{role.createdUser}}</td>
							<td>{{role.modifyUser}}</td>
							<td>
								<button type="button" @click="delRole(role.id)">删除</button>
								<button type="button" @click="updateRole(role.id)">修改</button>
							</td>
						</tr>
					</tbody>
				  </table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">
				<!-- -->
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li :class="{disabled:pageInfo.isFirstPage}">
							<a href="#" aria-label="Previous"  @click.prevent="prePage()">
								<span aria-hidden="true" >上一页</span>
							</a>
						</li>
						<li v-for="n in pageInfo.navigatepageNums"
							:class="{active:n==pageInfo.pageNum}">
							<a href="#" @click.prevent="loadRoleList(n)" >{{n}}</a>
						</li>
						<li :class="{disabled: pageInfo.isLastPage}">
							<a href="#" aria-label="Next" @click.prevent="nextPage()">
								<span aria-hidden="true">下一页</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- pageHelper-->


		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
  var roleApp= new Vue({
	  el:"#role-app",
	  data:{
		  searchRoleName:"",
		  roleList:[],
		  pageInfo:{}
	  },
	  methods:{
	  	loadRoleList:function (page) {
	  		if(!page){
	  			//说明第一次查询
				page=1;
			}
	  		var roleName=this.searchRoleName;
	  		//向后端发起请求
	  		//let url="";
			axios({
				method:'get',
				url:'sys-roles/findRolesList',
				params:{
					"roleName":roleName,
					"pageNum":page
				}
			}).then(res=>{
				let result=res.data;
				if(result.state==2000){
					this.roleList=result.data.list;
					this.pageInfo=result.data;
				}else{
					alert(result.message);
				}

			}).catch(e=>console.error(e.message));

		},
		  nextPage:function () {
			  if(this.pageInfo.hasNextPage){
			  	this.loadRoleList(this.pageInfo.nextPage);
			  }
		  },
		  prePage:function () {
			  if(this.pageInfo.hasPreviousPage){
				  this.loadRoleList(this.pageInfo.prePage);
			  }
		  },
		  addRole:function () {
	  		$("#mainContentId").data("roleId",'');
			let url="/sys/roleEdit";
			$('#mainContentId').load(url);

		  },
		  delRole:function (roleId) {
			if(!confirm("确认要删除该角色吗?")){
				return ;
			}
			axios.get("/sys-roles/delRole?roleId="+roleId).then(function (result) {
				console.log(result);
				if(result.data.state==2000){
					alert("删除成功!");
					$("#mainContentId").load("/sys/roleList");
				}else{
					alert(result.data.message);
				}
			})
		  },
		  updateRole:function (roleId) {
	  		//绑定roleId的值
			  $("#mainContentId").data("roleId",roleId);
			  $("#mainContentId").load("/sys/roleEdit",function () {
				$('.box-title').html("修改角色");
			  });
		  }
	  },
	  created:function () {
		this.loadRoleList();
	  }
  })



</script>











